<template>
  <view class="container">
    <!-- 任务详情板块（使用 uni-swipe-action-item 进行左滑操作） -->
    <uni-swipe-action>
      <uni-swipe-action-item :right-options="options" @click="upData">
      <view class="task-details">
        <view class="task-title">任务标题: {{ task.title }}</view>
        <view class="task-status">
          状态: <dictType typeName="task_status" :value="task.status"></dictType>
        </view>
        <view class="task-priority">
          优先级: <dictType typeName="task_priority" :value="task.priority"></dictType>
        </view>
        <view class="task-start">开始日期: {{ formatDate(task.startDate) }}</view>
        <view class="task-due">截止日期: {{ formatDate(task.dueDate) }}</view>
      </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 微信对话样式的评论列表 -->
    <view class="chat-container">
      <view v-for="comment in comments" :key="comment.id" class="chat-item">
        <view class="chat-avatar">{{ comment.userName[0] }}</view>
        <view class="chat-content">
          <view class="chat-user">{{ comment.userName }}</view>
          <view class="chat-text">{{ comment.comment }}</view>
          <view class="chat-time">{{ formatDate(comment.createdAt) }}</view>
        </view>
      </view>
    </view>

    <!-- 添加评论输入框（固定在屏幕底部） -->
    <view class="comment-input-container">
      <input v-model="newComment" class="comment-input"/>
      <button @click="addComment" class="comment-button">发送</button>
    </view>
  </view>
</template>

<script>
import {delTask, getTask} from '../../../api/project/task';
import DictType from "../../../components/dictType/dictType.vue";
import { listAllComment, addComment } from "../../../api/project/comment";
import {delProject} from "../../../api/project/project";

export default {
  components: { DictType },
  data() {
    return {
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#007aff'
        }
      }, {
        text: '编辑',
        style: {
          backgroundColor: '#dd524d'
        }
      }],
      comments: [],
      task: {},
      taskId: null,
      newComment: ''
    };
  },
  onLoad(options) {
    if (options.taskId) {
      this.taskId = options.taskId;
    }
    this.getData();
    this.getComments();
  },
  methods: {
    getComments() {
      if (!this.taskId) return;
      listAllComment({ taskId: this.taskId }).then(response => {
        this.comments = response.data || [];
      });
    },
    getData() {
      getTask(this.taskId).then(ref => {
        this.task = ref.data;
      });
    },
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    addComment() {
      if (!this.newComment.trim()) return;
      const commentData = {
        taskId: this.taskId,
        comment: this.newComment,
      };
      this.comments.push(commentData);
      this.newComment = '';
      addComment(commentData).then(() => this.getComments());
    },
    upData(e) {
      if (e.index === 0) {
        console.log('删除任务', this.taskId);
        uni.showModal({
          title: '提示',
          content: '确定要删除该任务吗？',
          success: (res) => {
            if (res.confirm) {
              delTask(this.taskId).then(res => {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });


      } else {
        uni.navigateTo({
          url: `/pages/project/upTask/upTask?taskId=${this.taskId}`
        });
      }
    }
  }
};
</script>

<style>
.container {

  padding: 20rpx 20rpx 120rpx;
  background-color: #f8f8f8;
}

/* 任务详情板块 */
.task-details {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.task-title {
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.task-status,
.task-priority,
.task-start,
.task-due {
  font-size: 28rpx;
  margin-bottom: 8rpx;
  color: #555;
}

/* 评论列表样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx 0;
}

.chat-item {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #eee;
}

.chat-item:last-child {
  border-bottom: none;
}

.chat-avatar {
  width: 50rpx;
  height: 50rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.chat-content {
  background-color: #f0f0f0;
  padding: 16rpx;
  border-radius: 12rpx;
  max-width: 70%;
}

.chat-user {
  font-weight: bold;
  margin-bottom: 4rpx;
}

.chat-text {
  font-size: 28rpx;
}

.chat-time {
  font-size: 24rpx;
  color: gray;
  text-align: right;
  margin-top: 4rpx;
}

/* 评论输入框样式 */
.comment-input-container {
  padding: 20rpx 20rpx 40rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  border-top: 1rpx solid #ddd;
  box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.comment-input {
  height: 50rpx;
  flex: 1;
  padding: 14rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.comment-button {
  height: 50rpx;
  margin-left: 10rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 28rpx;
  padding: 0 20rpx;
  border-radius: 8rpx;
}
</style>
